<template>
   <div class="user-info">
      <!-- 个人信息 -->
      <el-form ref="myForm" :model="userInfo" :rules="rules" label-width="220px">
        <!-- 工号 入职时间 -->
        <el-row class="inline-info">
          <el-col :span="12">
            <el-form-item label="工号" prop="workNumber">
              <el-input v-model="userInfo.workNumber" class="inputW" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="入职时间" prop="timeOfEntry">
              <!--
                  后台数据 "2018-01-01" -> 影响视图显示
                  视图选择 -> 默认绑定日期对象 -> v-model变量

                  type="data" (选择 年-月-日) 控制选择日期格式(组件渲染内容),写year就只显示年
                  value-format 选择的值绑定格式(默认不写,v-model绑定的是日期对象)
                  new Date()
                  Mon Jan 16 2023 01:13:40 GMT+0800 (中国标准时间) 内部会帮处理为 2022-01-01 这种格式
               -->
              <el-date-picker
                v-model="userInfo.timeOfEntry"
                style="width: 300px"
                type="date"
                class="inputW"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 姓名 部门 -->
        <el-row class="inline-info">
          <el-col :span="12">
            <el-form-item label="姓名" prop="username">
              <el-input v-model="userInfo.username" class="inputW" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="部门" prop="departmentName">
              <el-input v-model="userInfo.departmentName" class="inputW" @focus="depFocusFn"/>
              <el-tree v-if="treeShow" :data="departmentList" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
            </el-form-item>
          </el-col>
        </el-row>
        <!--手机 聘用形式  -->
        <el-row class="inline-info">
          <el-col :span="12">
            <el-form-item label="手机" prop="mobile">
              <el-input v-model="userInfo.mobile" style="width: 300px" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="聘用形式" prop="formOfEmployment">
              <el-select v-model="userInfo.formOfEmployment" class="inputW">
                <el-option
                  v-for="item in formOfEmployment.hireType"
                  :key="item.id"
                  :label="item.value"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 员工照片 -->
        <el-row class="inline-info">
          <el-col :span="12">
            <el-form-item label="员工头像">
              <!-- 放置上传图片组件 -->
              <upload-img ref="upload"></upload-img>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 保存个人信息 -->
        <el-row class="inline-info" type="flex" justify="center">
          <el-col :span="12">
            <el-button type="primary" @click="saveUser">保存更新</el-button>
            <el-button @click="$router.back()">返回</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
</template>

<script>
import formatter from '@/views/employees/formatter'
import { saveEmployeeInfoAPI } from '@/api'
export default {
  name: 'UserInfoEdit',
  props:{
    employessInfo: { // 个人信息(根源)
      type: Object,
      default: () => ({})
    },
    departmentList: { // 部门组织结构
      type: Array,
      default: () => []
    }
  },
  watch: {
    employessInfo(newVal){
      this.userInfo = {...newVal} // 深度复制个人信息
    },
    departmentList(newVal){
      this.department = [...newVal]
    },
    'userInfo.departmentName'(newVal,oldVal){
      // newVal obj
      // oldVal undefinded
      // console.log(newVal.length)
      // console.log(newVal,oldVal)
      if(newVal.length == 0) return
      if(oldVal == undefined){ // 只执行初始化的一次, 第一次 undefined 第二次 父传进来有值后开始被侦听
        this.checkName = this.employessInfo.departmentName // 备份后台传进来的第一次的值
      }
      /*
         如果不执行上面的备份赋值代码,则会第一次进入以下判断 '' === '总裁办' ? ''
         newVal: 总裁办
         this.checkName为空
         this.userInfo.departmentName = '' , 所以第一次得到的部门数据需要备份起来先,
         最简单的方法: 在 input 标签使用 readonly 标签即可,
      */
      if(this.checkName !== newVal){
        this.userInfo.departmentName = this.checkName
        this.$message('部门名称不能在此处修改','warning')
      }
    }
  },
  mounted(){
    // 解决回显问题
    setTimeout(() => {
      if(this.userInfo.staffPhoto){
        this.$refs.upload.imageUrl = this.userInfo.staffPhoto
      }
    },500)
  },
  data() {
    return {
      formOfEmployment: formatter, // 员工枚举数据
      userInfo: {}, // 存储被修改用户的信息(后台请求回来)
      defaultProps: { // el-tree属性
          children: 'children',
          label: 'name'
      },
      department: [], // 部门组织结构
      checkName: '',
      treeShow: false, // tree显示/隐藏
      rules: {
        workNumber: [
          {required: true,message: '工号是必填项',trigger: 'blur'},
        ],
        timeOfEntry: [
          {required: true,message: '入职时间是必填项',trigger: 'blur'},
        ],
        username: [
          {required: true,message: '姓名是必填项',trigger: 'blur'},
        ],
        departmentName: [
          {required: true,message: '部门名是必填项',trigger: 'change'},
        ],
        mobile: [
          {required: true,message: '手机号是必填项',trigger: 'blur'},
        ],
        formOfEmployment: [
          {required: true,message: '聘用形式是必填项',trigger: 'blur'},
        ],
      },
    }
  },
  methods: {
    // 保存用户信息
    saveUser() {
      this.$refs.myForm.validate(async valid => {
        if(valid){
          // 把图片数据字段从子组件里面获取出来,因为此时子组件的属性一定是有值的
          this.userInfo.staffPhoto = this.$refs.upload.imageUrl
          const res = await saveEmployeeInfoAPI(this.userInfo)
          this.$message('修改成功')
          this.$router.push('/employees')
          this.$store.dispatch('user/getUserInfoActions') // 发起请求
        }
      })
    },
    // el-tree 点击当前节点时触发的事件
    handleNodeClick(node){
      if(node && node.children){ // 不能把第一层的值作为被选中的值,而是子级作为被选中的值
        return // 点击的是父级则中断后续的逻辑,让其执行el-tree组件的默认展开列操作,而不是选中当前父节点关闭
      }
      this.checkName = node.name // 保存一份校验使用(可以不用这种方法直接使用标签属性 readonly)
      this.userInfo.departmentName = node.name // 表格展示数据用？
      this.treeShow = false // 关闭 el-tree
    },
    depFocusFn(){
      this.treeShow = true // 显示 el-tree
    }
  }
}
</script>

<style lang="scss" scoped></style>
